<template>
    <div class="container">
        <page-table :func="func" ref="pt"
		@selectChange="selectChange"
		:props="{ref:'table'}"
        >
			<template v-slot:batchChange>
				<el-button type="danger" v-permission="batchOperationNeedPer"   :disabled="checkboxNoChange" @click="showChangeOrderStatus=true">批量修改</el-button>
			</template>
			<template v-slot:bid="{data}" >
					{{data.row.bid}}  <i class="el-icon-copy-document i" title="复制" @click="toCopy(data.row.bid)"></i> 
			</template>
            <template slot="img" slot-scope="data">
                <image-preview :src="data.data.row.img"></image-preview>
            </template>
			
			<!-- <template v-slot:moreoperation="{data}"> -->
				<!-- <el-button type="warning" size="small" v-if="data.row.isDefault==0" @click="changeDefault(data.row.id)">设为默认</el-button> -->
				<!-- <div>
					{{ data.row.isDefault }}
				</div> -->
			<!-- </template> -->
			<template v-slot:expand="{data}">
				<div v-if="data.row.imgList.length==0">
					暂无订单截图
				</div>
				<div v-viewer class="expand-img-container" v-else> 
					<img :src="item | getFilePath" alt="" v-for="item in data.row.imgList" :key="item" width="50px" height="50px">
				</div>
			</template>
        </page-table>
		<el-dialog
			title="批量修改"
			v-model="showChangeOrderStatus"
			:visible.sync="showChangeOrderStatus">
			<el-tabs v-model="batchTabMode">
				<el-tab-pane label="结算金额" name="money" v-if="permission.includes(batchOperationNeedPer[0])">
					
				</el-tab-pane>
				<el-tab-pane label="账单编号" name="bid" v-if="permission.includes(batchOperationNeedPer[1])">
					
				</el-tab-pane>
			</el-tabs>
			<json-form ref="changeOrder" :options="batchOperationOption[batchTabMode]" :form="changeOrderForm[batchTabMode]" direction="h">

			</json-form>
			<!-- <span slot="footer">
                    <el-button @click="closeBatchDialog">关闭</el-button>
                </span> -->
		</el-dialog>
    </div>
</template>
<script>
import pageTable from "@/components/page-table.vue"
import ImagePreview from "@/components/image-preview.vue"
import func from "./index.js"
import {setDefault} from "@/apis/qrcode/index"
import { TypeOptions } from "../bill/constant"
import {changeBillMoney,changeBillBid} from "@/apis/order"
import { mapState } from "vuex"
import JsonForm from "@/components/json-form.vue"
export default {
	name:"order",
	components:{
		JsonForm,
		pageTable,
		ImagePreview
	},
	data(){
		return {
			func,
			TypeOptions,
			checkboxNoChange:true,
			showChangeOrderStatus:false,
			changeOrderForm:{
				money:{},
				bid:{}
			},
			batchTabMode:"money",
			batchOperationNeedPer:["billbatch:changeMoney","billbatch:changeBillNo"],
			batchTabNames:["money","bid"],
			batchOperationOption:{
				money:[
					{
						key:"money",
						label:"结算金额",
						type:"el-input", 
					},
					{
						key:"confirm",
						label:"确认",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"primary"
						},
						listeners:{
							click:()=>{
								this.$refs.changeOrder.submit(form=>{
									 
									let ids = this.$refs.pt.checkboxSelected.map(item=>item.id)
									let dto = {
										...form,
										ids
									}
									
									console.log(dto)
									changeBillMoney(dto).then(res=>{
										if(res.data){
											this.showChangeOrderStatus = false
											this.$refs.pt.checkboxSelected.forEach(item=>{
												item.money = form.money
											})
											this.$refs.pt.checkboxSelected = []
											console.log(this.$refs.pt.$refs)

											this.$refs.pt.$refs.table.clearSelection()
										}
									})
								})
								console.log("click btn")
							}
						}
					},
					{
						key:"cancel",
						label:"取消",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"danger"
						},
						listeners:{
							click:()=>{
								this.showChangeOrderStatus = false
								// console.log("click btn",this)
							}
						}
					}
				],
				bid:[	
					{
						key:"bid",
						label:"账单",
						type:"el-input",  
					 
					},
					{
						key:"confirm",
						label:"确认",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"primary"
						},
						listeners:{
							click:()=>{
								this.$refs.changeOrder.submit(form=>{
									let ids = this.$refs.pt.checkboxSelected.map(item=>item.id)
									let dto = {
										...form,
										ids
									}
									
									console.log(dto)
									changeBillBid(dto).then(res=>{
										if(res.data.status){
											success("操作成功")
											this.showChangeOrderStatus = false
											this.$refs.pt.checkboxSelected.forEach(item=>{
												item.bid =  form.bid
											})
											this.$refs.pt.checkboxSelected = []
											this.$refs.pt.$refs.table.clearSelection()
										}
									})
								})
								console.log("click btn")
							}
						}
					},
					{
						key:"cancel",
						label:"取消",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"danger"
						},
						listeners:{
							click:()=>{
								this.showChangeOrderStatus = false
								// console.log("click btn",this)
							}
						}
					}
				
				]
			},
		}
	},
	computed:{
		...mapState(["permission","option"])
	},
	mounted(){
		this.batchOperationNeedPer.forEach((item,index)=>{
			if(this.permission.includes(item) && !this.batchTabMode){
				this.batchTabMode = this.batchTabNames[index]
			}
		})
	},
	methods:{
		selectChange(checked){
			if(checked.length>0){
				this.checkboxNoChange = false
			}else{
				this.checkboxNoChange = true
			}
		},
		
		closeBatchDialog(){
			this.showChangeOrderStatus = false
			this.$refs.pt.checkboxSelected = []
			this.$refs.pt.$refs.table.clearSelection()

		},
		// 复制
		toCopy (item) {  
			this.$copyText(item).then(res=>{
					console.log(res)
					this.$message.success("复制成功")
					// this.showBuilder = false
					row.isNotGenUrl = 0
				},err=>{
					console.log("复制失败",err)
					this.$message.error("复制失败")
				})
		},
		changeDefault(id){
			setDefault(id).then(()=>{
				this.$refs.pt.getList()
			})
		}
	}
}
</script>
<style scoped lang="less">
.expand-img-container{
	display: flex;
	padding: 0 0 0 100px;
	img{
		margin-right: 20px;
	}
}
.i {
  cursor: pointer;
  font-size: 20px;
  margin-left: 10px;
  color: red;
}
</style>